<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元数据和样式定义 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议室预订系统 - 主页</title>
    <!-- 引入Chart.js图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 重置默认样式并设置全局字体 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 页面背景设置为渐变色 */
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏样式 */
        .top-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* 系统标题样式 */
        .system-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 用户操作区域 */
        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
        }

        /* 用户名按钮样式 */
        .user-btn {
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        /* 下拉菜单样式 */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            padding: 10px 0;
            min-width: 150px;
            display: none;
            z-index: 1000;
        }

        .dropdown-menu.show {
            display: block;
        }

        /* 下拉菜单项样式 */
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
            transition: background 0.3s ease;
        }

        .dropdown-item:hover {
            background: #f5f5f5;
        }

        /* 主内容区域 */
        .main-content {
            display: flex;
            flex: 1;
            padding: 20px;
            justify-content: center;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            max-width: 1400px; /* 增加最大宽度 */
        }

        /* 轮播图容器 */
        .carousel-container {
            width: 100%;
            height: 400px; /* 增加轮播图高度 */
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* 轮播图 */
        .carousel {
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* 轮播项 */
        .carousel-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel-item.active {
            opacity: 1;
        }

        /* 轮播图片 */
        .carousel-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 轮播内容 */
        .carousel-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
        }

        .carousel-content h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .carousel-content p {
            font-size: 16px;
            margin: 0;
        }

        /* 轮播指示器 */
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .indicator.active {
            background: white;
        }

        /* 功能按钮区域 */
        .features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 增加最小宽度 */
            gap: 25px; /* 增加间距 */
            margin-top: 20px;
        }

        /* 功能按钮样式 */
        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            text-decoration: none;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .feature-icon {
            font-size: 40px;
        }

        .feature-title {
            font-size: 18px;
            font-weight: 600;
        }

        /* 不同功能按钮的颜色 */
        .feature-booking {
            background: linear-gradient(135deg, #667eea, #7a00ff);
            color: white;
        }

        .feature-query {
            background: linear-gradient(135deg, #667eea, #8000ff);
            color: white;
        }

        .feature-rooms {
            background: linear-gradient(135deg, #667eea, #8000ff);
            color: white;
        }

        .feature-statistics {
            background: linear-gradient(135deg, #667eea, #7e00ff);
            color: white;
        }

        /* 统计图表样式 */
        .statistics-container {
            margin-top: 40px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .statistics-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 24px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .chart-wrapper {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .chart-wrapper h4 {
            text-align: center;
            margin-bottom: 15px;
            color: #333;
        }

        .chart-display {
            display: flex;
            justify-content: center;
            height: 400px; /* 增加图表高度 */
        }

        .chart-canvas-container {
            position: relative;
            width: 100%;
            max-width: 100%; /* 移除最大宽度限制 */
            max-height: 100%;
        }

        /* 为折线图提供更宽的容器 */
        .line-chart-container {
            position: relative;
            width: 100%;
            max-width: 100%; /* 移除最大宽度限制 */
            max-height: 100%;
        }

        .text-align {
            text-align: center;
            color: #333;
            margin-bottom: 15px;
        }

        /* 加载状态样式 */
        .loading {
            text-align: center;
            padding: 20px;
            color: #667eea;
        }

        .loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #667eea;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 错误提示样式 */
        .error-message {
            text-align: center;
            padding: 20px;
            color: #e74c3c;
            background-color: #fdf2f2;
            border-radius: 5px;
            margin: 10px 0;
        }

        /* 页脚样式 */
        .footer {
            text-align: center;
            padding: 20px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        /* 移动端响应式样式 */
        @media (max-width: 768px) {
            .top-nav {
                flex-direction: column;
                gap: 15px;
            }

            .carousel-container {
                height: 200px;
            }

            .features-container {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .chart-wrapper {
                padding: 15px;
            }
            
            .chart-display {
                height: 250px;
            }
            
            .chart-canvas-container,
            .line-chart-container {
                max-width: 100%;
                max-height: 100%;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="top-nav">
    <div class="system-title">
        <i class="fas fa-calendar-alt"></i> 会议室预订系统
    </div>

    <div class="user-actions">
        <button class="user-btn" onclick="toggleDropdown()">
            <i class="fas fa-user"></i>
            <span id="username">用户名</span>
            <i class="fas fa-caret-down"></i>
        </button>
        <div class="dropdown-menu" id="dropdownMenu">
            <a href="#" class="dropdown-item" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
                退出登录
            </a>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 内容区域 -->
    <div class="content">
        <!-- 轮播图 -->
        <div class="carousel-container">
            <div class="carousel">
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="现代化办公桌椅" class="carousel-img">
                    <div class="carousel-content">
                        <h3>现代化办公桌椅</h3>
                        <p>人体工学设计，提供舒适办公体验</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="会议室桌椅" class="carousel-img">
                    <div class="carousel-content">
                        <h3>会议室桌椅</h3>
                        <p>专业会议空间，激发团队协作效率</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="开放式办公空间" class="carousel-img">
                    <div class="carousel-content">
                        <h3>开放式办公空间</h3>
                        <p>灵活布局，促进沟通与创新</p>
                    </div>
                </div>
            </div>
            <div class="carousel-indicators">
                <div class="indicator active" data-index="0"></div>
                <div class="indicator" data-index="1"></div>
                <div class="indicator" data-index="2"></div>
            </div>
        </div>

        <!-- 功能按钮 -->
        <div class="features-container">
            <a href="/api/booking.html" class="feature-card feature-booking">
                <i class="fas fa-plus-circle feature-icon"></i>
                <div class="feature-title">预订会议室</div>
            </a>
            <a href="/api/search.html" class="feature-card feature-query">
                <i class="fas fa-search feature-icon"></i>
                <div class="feature-title">查询预订记录</div>
            </a>
            <a href="/api/rooms.html" class="feature-card feature-rooms">
                <i class="fas fa-door-open feature-icon"></i>
                <div class="feature-title">会议室管理</div>
            </a>
            <a href="/api/statistics.html" class="feature-card feature-statistics">
                <i class="fas fa-chart-bar feature-icon"></i>
                <div class="feature-title">统计信息</div>
            </a>
        </div>
        <!-- 统计图表-->
        <div class="statistics-container">
            <h3 class="statistics-title">会议室使用统计</h3>
            <div class="charts-container">
                <div class="chart-wrapper">
                    <!-- 饼状图容器 -->
                    <h4 class="text-align">会议室使用占比</h4>
                    <div class="chart-display" id="pieChartContainer">
                        <div class="loading">
                            <div class="loading-spinner"></div>
                            <p>正在加载数据...</p>
                        </div>
                    </div>
                </div>
                
                <div class="chart-wrapper">
                    <!-- 折线图容器 -->
                    <h4 class="text-align">预订趋势</h4>
                    <div class="chart-display" id="lineChartContainer">
                        <div class="loading">
                            <div class="loading-spinner"></div>
                            <p>正在加载数据...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <p>© 2025 会议室预订系统</p>
</footer>

<script>
    // 切换下拉菜单显示状态
    function toggleDropdown() {
        const dropdown = document.getElementById('dropdownMenu');
        dropdown.classList.toggle('show');
    }

    // 退出登录功能
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            // 清除本地存储的用户信息
            localStorage.removeItem('username');
            // 提示用户已退出登录
            alert('您已退出登录');
            // 跳转到登录页面
            window.location.href = '/api/login.html';
        }
    }

    // 点击其他区域关闭下拉菜单
    window.onclick = function(event) {
        if (!event.target.matches('.user-btn') && !event.target.closest('.user-btn')) {
            const dropdown = document.getElementById('dropdownMenu');
            if (dropdown.classList.contains('show')) {
                dropdown.classList.remove('show');
            }
        }
    }

    // 页面加载完成后尝试获取用户名
    window.onload = function() {
        // 这里可以从本地存储或其他方式获取用户名
        // 示例：从localStorage获取用户名
        const storedUsername = localStorage.getItem('username');
        if (storedUsername) {
            document.getElementById('username').textContent = storedUsername;
        } else {
            // 如果没有存储用户名，则使用默认值
            document.getElementById('username').textContent = '用户123';
        }

        // 初始化轮播图
        initCarousel();
        
        // 初始化统计图表
        initCharts();
    }

    // 轮播图功能
    function initCarousel() {
        let currentIndex = 0;
        const items = document.querySelectorAll('.carousel-item');
        const indicators = document.querySelectorAll('.indicator');
        const totalItems = items.length;

        // 自动播放
        setInterval(() => {
            // 移除当前活动项
            items[currentIndex].classList.remove('active');
            indicators[currentIndex].classList.remove('active');
            
            // 计算下一项索引
            currentIndex = (currentIndex + 1) % totalItems;
            
            // 激活下一项
            items[currentIndex].classList.add('active');
            indicators[currentIndex].classList.add('active');
        }, 3000);

        // 手动切换
        indicators.forEach(indicator => {
            indicator.addEventListener('click', () => {
                const index = parseInt(indicator.getAttribute('data-index'));
                
                // 移除当前活动项
                items[currentIndex].classList.remove('active');
                indicators[currentIndex].classList.remove('active');
                
                // 激活点击的项
                currentIndex = index;
                items[currentIndex].classList.add('active');
                indicator.classList.add('active');
            });
        });
        
        // 默认激活第一项
        if (items.length > 0) {
            items[0].classList.add('active');
        }
    }
    
    // 初始化统计图表函数
    function initCharts() {
        // 从后端获取统计数据
        fetch('/api/meetings/statistics/weekly')
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    const stats = data.data;
                    const roomStats = stats.roomStats;
                    const dailyStats = stats.dailyStats;
                    
                    // 准备会议室统计数据
                    const roomLabels = Object.keys(roomStats);
                    const roomData = Object.values(roomStats);
                    
                    // 准备每日统计数据并按星期顺序排序
                    const dailyLabels = Object.keys(dailyStats);
                    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                    
                    // 创建一个有序的数组，确保星期一到星期日的正确顺序
                    const orderedData = [];
                    for (let i = 1; i <= 7; i++) { // 从周一(1)到周日(0，但我们要放在最后)
                        const dayIndex = i <= 6 ? i : 0; // 周日是0，但我们要放在最后
                        const dayLabel = weekdays[dayIndex];
                        
                        // 查找对应的日期和数据
                        const dateEntry = dailyLabels.find(date => {
                            const day = new Date(date).getDay();
                            return day === dayIndex;
                        });
                        
                        if (dateEntry) {
                            orderedData.push({
                                label: dayLabel,
                                value: dailyStats[dateEntry],
                                date: dateEntry
                            });
                        } else {
                            orderedData.push({
                                label: dayLabel,
                                value: 0,
                                date: null
                            });
                        }
                    }
                    
                    // 提取排序后的标签和数据
                    const formattedLabels = orderedData.map(item => item.label);
                    const sortedData = orderedData.map(item => item.value);
                    
                    // 创建饼状图
                    createPieChart(roomLabels, roomData);
                    
                    // 创建折线图
                    createLineChart(formattedLabels, sortedData);
                } else {
                    showError('获取统计数据失败: ' + data.msg);
                }
            })
            .catch(error => {
                console.error('获取统计数据错误:', error);
                showError('获取统计数据时发生错误，请稍后重试');
            });
    }
    
    // 创建饼状图
    function createPieChart(labels, data) {
        // 清空容器并创建canvas元素
        const container = document.getElementById('pieChartContainer');
        container.innerHTML = '<div class="chart-canvas-container"><canvas id="pieChart"></canvas></div>';
        
        const pieData = {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: [
                    '#667eea',
                    '#764ba2',
                    '#f093fb',
                    '#f5576c',
                    '#4facfe',
                    '#00f2fe',
                    '#43e97b',
                    '#38f9d7',
                    '#fa709a',
                    '#fee140'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        };

        const pieConfig = {
            type: 'doughnut',
            data: pieData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '50%', // 设置内环大小
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((acc, value) => acc + value, 0);
                                const percentage = ((context.parsed / total) * 100).toFixed(1);
                                return `${context.label}: ${context.parsed} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        };

        const pieCtx = document.getElementById('pieChart').getContext('2d');
        new Chart(pieCtx, pieConfig);
    }
    
    // 创建折线图
    function createLineChart(labels, data) {
        // 清空容器并创建canvas元素，使用更宽的容器
        const container = document.getElementById('lineChartContainer');
        container.innerHTML = '<div class="line-chart-container"><canvas id="lineChart"></canvas></div>';
        
        const lineData = {
            labels: labels,
            datasets: [{
                label: '本周预订数量',
                data: data,
                fill: false,
                borderColor: '#667eea',
                backgroundColor: '#667eea',
                tension: 0.1
            }]
        };

        const lineConfig = {
            type: 'line',
            data: lineData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            font: {
                                size: 10
                            }
                        },
                        title: {
                            display: true,
                            text: '预订数量',
                            font: {
                                size: 12
                            }
                        }
                    },
                    x: {
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        };

        const lineCtx = document.getElementById('lineChart').getContext('2d');
        new Chart(lineCtx, lineConfig);
    }
    
    // 显示错误信息
    function showError(message) {
        // 显示饼状图错误
        const pieContainer = document.getElementById('pieChartContainer');
        pieContainer.innerHTML = `<div class="error-message">${message}</div>`;
        
        // 显示折线图错误
        const lineContainer = document.getElementById('lineChartContainer');
        lineContainer.innerHTML = `<div class="error-message">${message}</div>`;
    }
</script>
</body>
</html>